<template>
  <div>
    <a-modal
      title="班级分类设置"
      :visible="showClassType"
      @cancel="hideModal"
      :footer="null"
      style="top: 160px;"
      @confirmLoading="modelLoading"
    >
      <div style="margin-bottom: 16px">
        <a-button type="primary" @click="add">添加</a-button>
        <a-modal
          title="添加班级分类"
          :visible="addClassTypeModel"
          okText="添加"
          @cancel="hideAddSubjectModal"
          width="410px"
          :confirmLoading="changeBtnLoading"
          @ok="batchAdd"
          style="top: 220px;"
        >
          <div style="max-height:200px;overflow-y:auto;">
            <div
              style="margin-bottom: 16px;margin-top:16px;"
              v-for="(item,index) in classTypeNames"
              :key="index"
            >
              班级分类名称：
              <a-input
                placeholder="请输入班级分类名称"
                style="width:200px;"
                v-model="classTypeNames[index]"
              />
              <a @click="classTypeNames.splice(index,1)" style="margin-left:10px;">删除</a>
            </div>
          </div>
          <a-button type="primary" icon="plus" @click="addClassTypeLine" >添加</a-button>
        </a-modal>
        <!-- <a-button style="margin-left: 8px" :disabled="!hasSelected" @click="del">删除</a-button> -->
        <!-- <span style="margin-left: 8px">
          <template v-if="hasSelected">{{`已选中 ${selectedRowKeys.length} 个班级分类`}}</template>
        </span> -->
        <a-modal
          title="修改班级分类"
          :visible="changeSubjectModel"
          @cancel="hideChangeSubjectModal"
          @ok="changeSubject"
          :confirmLoading="changeBtnLoading"
          width="400px"
          style="top: 220px;"
        >
          <div style="margin-bottom: 16px;margin-top:16px;">
            班级分类名称：
            <a-input placeholder="请输入班级分类名称" style="width:200px;" v-model="updateSubject.name" />
          </div>
        </a-modal>
      </div>
      <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
      <a-table
        :columns="columns"
        :dataSource="data"
        :showHeader="false"
        :pagination="false"
        :loading="tableLoading"
        :rowKey="(record) => record.id"
        style="max-height:300px;overflow-y:auto;"
        size="small"
        ref="subject_table"
      >
        <!-- <span slot="is_enable" slot-scope="text,record">
          <a-switch :checked="text==1?true:false" @click="changeType(text,record)" />
        </span>-->
        <span slot="action" slot-scope="record">
          <a href="javascript:;" @click="change(record)">修改</a>
          <a href="javascript:;" @click="del(record.id)" style="margin-left:10px;">删除</a>
        </span>
      </a-table>
    </a-modal>
  </div>
</template>
<script>
import { classifyList, addClassify, changeClassifyType, delClassify, changeClassify } from '@/api/class'
import { deepClone } from '@/utils/pub_methods_base'
const columns = [
  {
    title: '班级分类名称',
    ellipsis: true,
    dataIndex: 'name'
  },
  {
    title: '操作',
    dataIndex: '',
    ellipsis: true,
    align: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'classTypeModel',
  props: {},
  data() {
    return {
      //弹框数据
      showClassType: false,
      addClassTypeModel: false,
      changeSubjectModel: false,
      changeBtnLoading: false,
      modelLoading: false,
      tableLoading: false,
      classTypeNames: [''],
      //表格数据
      data: [
        {
          name: '',
          is_enable: null
        }
      ],
      columns,
      selectedRowKeys: [],
      updateSubject: {}
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    }
  },
  watch:{
    showClassType(val){
      this.$emit('reload');
    }
  },
  created() {
    this.tableLoading = true
    classifyList({ pageSize: 999999 }).then(res => {
      this.data = res.data
      this.tableLoading = false
    })
  },
  methods: {
    add() {
      this.addClassTypeModel = true
    },
    batchAdd() {
      this.changeBtnLoading = true
      this.tableLoading = true
      let schoolID = this.$store.state.user.school
      let params = JSON.stringify(this.classTypeNames)
      let data = JSON.parse(params)
      let arr = []
      data.forEach(val => {
        if (val !== '' && val !== null) {
          arr.push(val)
        }
      })
      let updateParams = Array.from(new Set(arr))
      addClassify({ school_id: schoolID, name_arr: updateParams })
        .then(res => {
          this.changeBtnLoading = false
          this.$message.success('添加成功')
          this.tableLoading = false
          classifyList({ pageSize: 999999 }).then(res => {
            this.data = res.data
          })
          this.hideAddSubjectModal()
        })
        .catch(err => {
          this.changeBtnLoading = false
          this.tableLoading = false
          this.$message.error(err.data.message||'添加失败')
        })
    },
    addClassTypeLine() {
      this.classTypeNames.push('')
    },
    changeType(data, e) {
      if (data == 2 || data == null) {
        changeClassifyType({ is_enable: 1 }, e.id)
          .then(res => {
            this.tableLoading = true
            classifyList({ pageSize: 999999 }).then(res => {
              this.data = res.data
              this.tableLoading = false
            })
          })
          .catch(err => {
            this.tableLoading = false
            this.$message.error(err.data.message||'更新状态失败')
          })
      } else {
        changeClassifyType({ is_enable: 2 }, e.id)
          .then(res => {
            this.tableLoading = true
            classifyList({ pageSize: 999999 }).then(res => {
              this.data = res.data
              this.tableLoading = false
            })
          })
          .catch(err => {
            this.tableLoading = false
            this.$message.error(err.data.message||'更新状态失败')
          })
      }
    },
    changeSubject() {
      this.changeBtnLoading = true
      changeClassify({ name: this.updateSubject.name }, this.updateSubject.id)
        .then(res => {
          this.$message.success('修改成功')
          this.tableLoading = true
          this.changeBtnLoading = false
          classifyList({ pageSize: 999999 }).then(res => {
            this.data = res.data
            this.tableLoading = false
          })
          this.hideChangeSubjectModal()
        })
        .catch(err => {
          this.$message.error(err.data.message||'修改失败')
          this.changeBtnLoading = false
        })
    },
    del(e) {
      if (e) {
        this.tableLoading = true
        delClassify(e)
          .then(res => {
            this.$message.success('删除成功')
            classifyList({ pageSize: 999999 }).then(res => {
              this.data = res.data
            this.tableLoading = false
            })
          })
          .catch(err => {
            this.$message.error(err.data.message||'删除失败')
            this.tableLoading = false
          })
      } else {
        return false
      }
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    //弹框事件
    showModal() {
      this.showClassType = true
    },
    hideModal() {
      this.showClassType = false
      this.$emit('reload')
    },
    hideAddSubjectModal() {
      this.classTypeNames = ['']
      this.addClassTypeModel = false
    },
    hideChangeSubjectModal() {
      this.updateSubject = {}
      this.changeSubjectModel = false
    },
    change(e) {
      this.updateSubject = e
      this.changeSubjectModel = true
    }
  }
}
</script>